<template>
	<div class="modal-container">
		<el-dialog title="发票开具" width="596px" custom-class="modal-record " :close-on-click-modal="false"
			:visible.sync="show" :before-close="on_before_close" :closed="on_closed">

			<div class="modal-inner">
				<div class="modal-ctx">
					<div class="input-box flex">
						<div class="label">角色</div>
						<div class="input-item">
							<el-input clearable type="text" v-model="form.title" placeholder="角色"> </el-input>
						</div>
					</div>

					<div class="input-box flex">
						<div class="label">菜单联动类型</div>
						<div class="input-item">
							<!-- 0-未设置 1-全选/全不选 2-父子联动 -->
							<el-radio-group v-model="form.rolesType">
								<el-radio :label="1">联动</el-radio>
								<el-radio :label="0">不联动</el-radio>
							</el-radio-group>
						</div>
					</div>

					<div class="input-box flex">
						<div class="label">菜单权限</div>
						<div class="input-item">
							<div class="cate-cascader">
								<el-cascader v-model="cascader_value" :options="menu_tree_cates" :props="cascader_props"
									clearable @change="on_cascader_change"></el-cascader>
							</div>
						</div>
					</div>

					<div class="input-box flex">
						<div class="label">权限字符</div>
						<div class="input-item">
							<el-input clearable type="text" v-model="form.authStr" placeholder="权限字符"> </el-input>
						</div>
					</div>

					<div class="input-box flex">
						<div class="label">排序</div>
						<div class="input-item">
							<el-input clearable type="text" v-model="form.ordering" placeholder="排序"> </el-input>
						</div>
					</div>

					<div class="input-box flex">
						<div class="label">状态</div>
						<div class="input-item">
							<el-radio-group v-model="form.status">
								<el-radio :label="1">启用</el-radio>
								<el-radio :label="0">禁用</el-radio>
							</el-radio-group>
						</div>
					</div>

					<div class="input-box flex">
						<div class="label">备注</div>
						<div class="input-item">
							<el-input clearable type="textarea" v-model="form.remark" placeholder="备注"> </el-input>
						</div>
					</div>


				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="" @click="show = false">取消</el-button>
				<el-button type="primary" @click="do_submit()">确认</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import {
	mapState
} from "vuex";

export default {
	name: "modal-hetong",
	components: {

	},

	data() {
		return {
			show: false,
			info: {

			},
			form: {
				"id": "",
				"title": "",
				"status": "",
				"rolesType": "",
				"ordering": "",
				"roles": "",
				"authStr": "",
				"remark": "",
			},


			// 级联
			menu_tree_cates: [],
			menu_flat_cates: [],
			cascader_props: {
				value: 'id',
				label: 'title',
				children: 'child',
				multiple: true,
				checkStrictly: true
			},

			cascader_value: '',
			// 级联
		};
	},
	computed: {},
	watch: {

	},
	created() {
		this.query_menu_cate()
	},

	methods: {
		init(row) {
			this.show = true;

			if (row) {
				this.query_detail(row)
				// this.form = {
				// 	"id": row.id || "",
				// 	"title": row.title || "",
				// 	"status": row.status || "",
				// 	"rolesType": row.rolesType || "",
				// 	"ordering": row.ordering || "",
				// 	"roles": row.roles || "",
				// 	"authStr": row.authStr || "",
				// 	"remark": row.remark || "",
				// };
			}
		},
		query_detail(row) {
			this.$api({
				url: '/admin_service.php',
				method: 'get',
				data: {
					action: "auth_getRoleInfo",
					id: row.id
				}
			}).then(res => {
				if (res.code == 200) {
					this.form = {
						"id": row.id || "",
						"title": row.title || "",
						"status": row.status || "",
						"rolesType": row.rolesType || "",
						"ordering": row.ordering || "",
						"roles": row.roles || "",
						"authStr": row.authStr || "",
						"remark": row.remark || "",
					};

					if (row.roles) {
						let finally_id_list = row.roles.split(',')
						let id_values = []
						finally_id_list.forEach(id => {
							let cate = this.menu_flat_cates.find(v => v.id == id)
							id_values.push(cate.id_path)
						})

						this.cascader_value = id_values;//级联选择器 回显
					}
				}
			})
		},
		on_before_close() {
			this.show = false;
		},
		on_closed() {

		},

		do_submit() {
			if (!this.form.title) {
				alertErr("请填写角色名称");
				return;
			}

			this.$api({
				url: '/admin_service.php',
				method: 'get',
				data: {
					action: "auth_saveRole",
					...this.form
				}
			}).then(res => {
				if (res.code == 200) {
					this.$emit('confirm')
					this.show = false
					this.$message({
						message: res.msg,
						type: 'success'
					})
				} else {
					alertErr(res.msg)
				}
			})
		},

		uploadChange(url) {
			this.form.invoiceUrl = url;
		},


		//级联选择
		//级联选择
		initValue(value) {
			this.cascader_value = value
		},

		query_menu_cate() {
			this.$api({
				url: '/admin_service.php',
				method: 'get',
				data: {
					action: "auth_getMenuList",
					page: 1,
					pageNum: 1000
				}
			}).then((res) => {
				if (res.code == 200) {
					this.menu_tree_cates = res.data.list;
					this.menu_flat_cates = this.getFlatFromTree(this.menu_tree_cates)
					this.$log('所有菜单数据', this.menu_flat_cates)
				}
			})
		},

		getFlatFromTree(treeList, flat_list = [], parent_id_path = []) {
			treeList.forEach(v => {
				v.id_path = [...parent_id_path, v.id]
				flat_list.push(v);
				if (v.child && v.child.length) {
					// flat_list.push(...v.child)
					this.getFlatFromTree(v.child, flat_list, v.id_path)
				}
			})

			return flat_list
		},


		on_cascader_change(value) {
			let cate_list = []
			let cate_title_list = []
			value.forEach(id_arr => {
				let id = id_arr[id_arr.length - 1]
				let cate = this.menu_flat_cates.find(v => v.id == id)
				cate_list.push(cate)
				cate_title_list.push(cate.title)
			})

			let info = {
				value: value,
				cate_list: cate_list,
				cate_title_list: cate_title_list,
			}
			this.$log('级联选择器 value', value)
			this.$log('级联选择器 info', info)
			this.$emit('confirm', info)


			this.form.roles = cate_list.map(v => v.id).join(',')
		}
		//级联选择
	},
};
</script>

<style scoped lang="less">
.cate-cascader {
	width: 100%;
}

.el-cascader {
	width: 100%;
}




.upload-plus {
	width: 140px;
}

/deep/ .el-upload {
	display: block;
	width: 200px;
	margin: 0 auto;
	margin: 0;

	.empty {
		.flex-center();
	}
}

/deep/ .modal-record {
	// margin-top: 80px !important;


	.modal-inner {
		padding: 0;
	}

	.el-dialog__header {
		.flex-between();
		border-bottom: 1px solid #eee;
		background: #a98c4d;
		background: #f7f7f7;
		height: 60px;
		line-height: 60px;
		padding: 0 20px;
		font-size: 18px;
		color: #333;

		.el-dialog__title {
			color: #000;
		}

		.el-dialog__headerbtn {

			// top: 0;
			.el-dialog__close {
				color: #000;
				font-size: 20px;
				font-weight: bold;
			}
		}
	}

	.el-dialog__body {
		padding: 0;
	}

	.el-dialog__footer {
		text-align: center;



	}
}

.modal-ctx {
	padding: 30px 50px;
	max-height: 60vh;
	overflow-y: auto;
	border-bottom: 1px solid #ddd;

	.tip {
		margin-bottom: 20px;
		color: #444;
		font-size: 14px;
	}

	.input-box {
		margin-bottom: 15px;
		position: relative;

		&.flex {
			display: flex;
			align-items: flex-start;
			// align-items: center;

			.label {
				margin-bottom: 0;
			}
		}

		.label {
			min-width: 80px;
			// margin-right: 20px;
			margin-bottom: 20px;
			font-size: 14px;
			color: #6e7285;
		}

		.input-item {
			flex: 1;
			display: flex;
			align-items: center;


			.el-input {
				width: 220px;
				width: 100%;
			}

			.el-select {
				width: 100%;
			}
		}
	}
}

.upload-ctx {
	margin: 20px 0;
}

.btn-send {}
</style>